<template>
  <div class="main">
    <div class="container">
      <div class="container-top">
        <div class="top">
          <div class="title">项目申报中心</div>
        </div>
        <div class="contentTitle">
          <p>编辑申报项目</p>
        </div>
      </div>
      <div class="content">
        <el-form ref="CourseForm" :model="CourseForm" label-width="200px">
          <el-form-item label="课程名称">
            <el-input
              v-model="CourseForm.declare_name"
              class="common"
              @input="change($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="课程负责人">
            <div class="main-members">
              <span
                class="name"
                v-for="(item, index) in principalForm.principalData"
                :key="index"
                >{{ item.real_name }}&nbsp;</span
              >
              <span class="join" @click="centerDialogVisible = true"
                ><i class="el-icon-circle-plus"></i>录入基础信息</span
              >
            </div>
          </el-form-item>
          <el-form-item label="课程团队主要成员">
            <div class="main-members">
              <span
                class="name"
                v-for="(item, index) in membersForm.membersData"
                :key="index"
                >{{ item.real_name }}&nbsp;</span
              >
              <span class="join" @click="membersDialogVisible = true"
                ><i class="el-icon-circle-plus"></i>录入基础信息</span
              >
            </div>
          </el-form-item>
          <el-form-item label="内容描述">
            <el-input
              type="textarea"
              v-model="CourseForm.describe"
              @input="change($event)"
            ></el-input>
          </el-form-item>
          <div v-for="(item, index) in customfields" :key="index">
            <!-- input框 -->
            <el-form-item
              :label="item.field_name"
              v-if="item.field_type === 'p_input'"
              class="common"
            >
              <el-input
                type="text"
                v-model="CourseForm.fields[item.field_code]"
                :name="item.field_code"
                :maxlength="item.field_length"
                @input="change($event)"
              ></el-input>
            </el-form-item>
            <!-- 单选框 -->
            <el-form-item
              :label="item.field_name"
              v-if="item.field_type === 'p_radio'"
            >
              <el-radio-group
                v-model="CourseForm.fields[item.field_code]"
                :name="item.field_code"
              >
                <el-radio
                  v-for="(ele, idx) in item.field_text"
                  :key="idx"
                  :label="ele.name"
                ></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 复选框 -->
            <el-form-item
              :label="item.field_name"
              v-if="item.field_type === 'p_checkbox'"
            >
              <el-checkbox-group
                v-model="CourseForm.fields[item.field_code]"
                :name="item.field_code"
              >
                <el-checkbox
                  v-for="(ele, idex) in item.field_text"
                  :label="ele.name"
                  :key="idex"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 下拉框 -->
            <el-form-item
              :label="item.field_name"
              v-if="item.field_type === 'p_selected'"
            >
              <el-select
                v-model="CourseForm.fields[item.field_code]"
                placeholder="请选择"
              >
                <el-option
                  v-for="(ele, idx) in item.field_text"
                  :key="idx"
                  :label="ele.name"
                  :value="ele.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 文本域 -->
            <el-form-item
              :label="item.field_name"
              v-if="item.field_type === 'p_texteara'"
            >
              <el-input
                type="textarea"
                v-model="CourseForm.fields[item.field_code]"
                :name="item.field_code"
                :maxlength="item.field_length"
                @input="change($event)"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item
            label="申报附件"
            v-if="
              ProjectDetails.attach_doc_num != '0' ||
              ProjectDetails.attach_video_num != '0'
            "
          >
            <FileUploader
              fileType="文档"
              type="1"
              v-if="Number(ProjectDetails.attach_doc_num) !== 0"
              :accept="ProjectDetails.attach_doc"
              :count="Number(ProjectDetails.attach_doc_num)"
              :size="Number(ProjectDetails.attach_doc_size)"
              :uploadedList="uploadedFileList"
              @changeFile="changeFile"
              @uploadedStatus="uploadedStatus"
            />
            <FileUploader
              fileType="视频"
              type="2"
              v-if="Number(ProjectDetails.attach_video_num) !== 0"
              :accept="ProjectDetails.attach_video"
              :count="Number(ProjectDetails.attach_video_num)"
              :size="Number(ProjectDetails.attach_video_size)"
              :uploadedList="uploadedVideoList"
              @changeFile="changeVideo"
              @uploadedStatus="uploadedStatus"
            />
            <FileUploader
              fileType="压缩文件"
              type="3"
              v-if="Number(ProjectDetails.attach_zip_num) !== 0"
              :accept="ProjectDetails.attach_zip"
              :count="Number(ProjectDetails.attach_zip_num)"
              :size="Number(ProjectDetails.attach_zip_size)"
              :uploadedList="uploadedZipList"
              @changeFile="changeZip"
              @uploadedStatus="uploadedStatus"
            />
            <FileUploader
              fileType="图片"
              type="4"
              v-if="Number(ProjectDetails.attach_pic_num) !== 0"
              :accept="ProjectDetails.attach_pic"
              :count="Number(ProjectDetails.attach_pic_num)"
              :size="Number(ProjectDetails.attach_pic_size)"
              :uploadedList="uploadedPicList"
              @changeFile="changePic"
              @uploadedStatus="uploadedStatus"
            />
          </el-form-item>
          <div class="item" v-if="details.status === '9'">
            <p>退回原因</p>
            <p>{{ details.remark }}</p>
          </div>
          <el-form-item class="button">
            <el-button icon="iconfont icon-guanbi" class="close" @click="back"
              >取消</el-button
            >
            <el-button
              type="primary"
              icon="iconfont icon-baocun_mian"
              class="save"
              :disabled="fileStatus"
              @click="onSubmit()"
              >保存</el-button
            >
            <el-button
              type="primary"
              @click="onSubmit2()"
              class="submit"
              :disabled="fileStatus"
              ><img src="@/assets/images/发布项目.png" />提交审核</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="项目负责人"
      :visible.sync="centerDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-form :model="principalForm" ref="principalForm">
        <el-table
          :data="principalForm.principalData"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <el-form-item
                :prop="'principalData.' + scope.$index + '.real_name'"
                :rules="[
                  {
                    min: 2,
                    max: 10,
                    message: '长度在 2 到 10 个字符',
                    trigger: 'blur',
                  },
                  {
                    pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                    message: '姓名不支持特殊字符',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="scope.row.real_name"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              <el-form-item
                :prop="'principalData.' + scope.$index + '.phone'"
                :rules="[
                  {
                    pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
                    message: '请输入正确的电话号码',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="scope.row.phone"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="院系">
            <template slot-scope="scope">
              <el-form-item :prop="'principalData.' + scope.$index + '.yuanxi'">
                <el-input
                  v-model="scope.row.yuanxi"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="职务">
            <template slot-scope="scope">
              <el-form-item :prop="'principalData.' + scope.$index + '.zhiwu'">
                <el-input
                  v-model="scope.row.zhiwu"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="职称">
            <template slot-scope="scope">
              <el-form-item
                :prop="'principalData.' + scope.$index + '.zhicheng'"
              >
                <el-input
                  v-model="scope.row.zhicheng"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="承担任务">
            <template slot-scope="scope">
              <el-form-item :prop="'principalData.' + scope.$index + '.renwu'">
                <el-input
                  v-model="scope.row.renwu"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <el-button
            icon="iconfont icon-guanbi"
            class="close"
            @click="centerDialogVisible = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="submit"
            @click="principalFunction('principalForm')"
            ><img src="@/assets/images/entry.png" />确定录入</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="团队主要成员"
      :visible.sync="membersDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-form :model="membersForm" ref="membersForm">
        <el-table :data="membersForm.membersData" border style="width: 100%">
          <el-table-column label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <el-form-item
                :prop="'membersData.' + scope.$index + '.real_name'"
                :rules="[
                  {
                    min: 2,
                    max: 10,
                    message: '长度在 2 到 10 个字符',
                    trigger: 'blur',
                  },
                  {
                    pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                    message: '姓名不支持特殊字符',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="scope.row.real_name"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              <el-form-item
                :prop="'membersData.' + scope.$index + '.phone'"
                :rules="[
                  {
                    pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
                    message: '请输入正确的电话号码',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="scope.row.phone"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="院系">
            <template slot-scope="scope">
              <el-form-item :prop="'membersData.' + scope.$index + '.yuanxi'">
                <el-input
                  v-model="scope.row.yuanxi"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="职务">
            <template slot-scope="scope">
              <el-form-item :prop="'membersData.' + scope.$index + '.zhiwu'">
                <el-input
                  v-model="scope.row.zhiwu"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="职称">
            <template slot-scope="scope">
              <el-form-item :prop="'membersData.' + scope.$index + '.zhicheng'">
                <el-input
                  v-model="scope.row.zhicheng"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="承担任务">
            <template slot-scope="scope">
              <el-form-item :prop="'membersData.' + scope.$index + '.renwu'">
                <el-input
                  v-model="scope.row.renwu"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <el-button
            icon="iconfont icon-guanbi"
            class="close"
            @click="membersDialogVisible = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="submit"
            @click="membersFunction('membersForm')"
            ><img src="@/assets/images/entry.png" />确定录入</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  UserDeclareEdit,
  UserCustomFields,
  UserDeclareDetails,
  UserProjectDetails,
} from "@/api/login";

import File from "@/components/File.vue";
import Vedio from "@/components/Vedio.vue";
import FileUploader from "@/components/FileUploader";

export default {
  name: "ShenBaoZhongXin",
  data() {
    return {
      Showbg: false,
      fieldtemp: {},
      CourseForm: {
        // 课程名称
        name: "",
        // 课程负责人
        principal: "",
        // 项目内容
        describe: "",
        // 主要成员
        membersList: [
          {
            key: "",
          },
          {
            key: "",
          },
          {
            key: "",
          },
          {
            key: "",
          },
          {
            key: "",
          },
        ],
        // 自定义字段
        fields: [],
      },
      principalForm: {
        principalData: [],
      },
      membersForm: {
        membersData: [],
      },
      centerDialogVisible: false,
      membersDialogVisible: false,
      dialogVisible: false,
      // 视频文件列表
      VideofileListData: [],
      // 文件列表
      fileListData: [],
      ProjectDetails: [],
      customfields: [],
      details: "",
      meta: "",
      status: "",
      projectid: "",
      token: "",
      declareid: "",
      fileAttachList: [],
      videoAttachList: [],
      zipAttachList: [],
      picAttachList: [],
      uploadedFileList: [],
      uploadedVideoList: [],
      uploadedZipList: [],
      uploadedPicList: [],
      fileStatus: false,
    };
  },
  components: {
    "v-file": File,
    "v-vedio": Vedio,
    FileUploader,
  },
  filters: {
    filterType(val) {
      if (val === 0) return "0 B";
      var k = 1024, // or 1024
        sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
        i = Math.floor(Math.log(val) / Math.log(k));
      return (val / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
    },
  },
  methods: {
    change(e) {
      this.$forceUpdate();
    },
    changeFile(uploaded, fileList) {
      this.uploadedFileList = uploaded;
      this.fileAttachList = fileList;
    },
    changeVideo(uploaded, fileList) {
      this.uploadedVideoList = uploaded;
      this.videoAttachList = fileList;
    },
    changeZip(uploaded, fileList) {
      this.uploadedZipList = uploaded;
      this.zipAttachList = fileList;
    },
    changePic(uploaded, fileList) {
      this.uploadedPicList = uploaded;
      this.picAttachList = fileList;
    },
    uploadedStatus(data) {
      this.fileStatus = data;
    },
    principalFunction(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.centerDialogVisible = false;
        } else {
          return false;
        }
      });
    },
    membersFunction(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.membersDialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 获取项目详情
    queryUserDeclareDetails() {
      // this.principalForm.principalData = [];
      // this.membersForm.membersData = [];
      UserDeclareDetails({
        token: this.token,
        declare_id: this.declareid,
      }).then((result) => {
        if (result.code === 1) {
          if (result.msg === "数据不存在") {
            this.$router.push({
              path: "/dataError",
            });
          } else if (result.msg === "项目已过期") {
            this.$router.push({
              path: "/overdueError",
            });
          }
          const { data } = result;
          this.details = data;
          this.CourseForm.declare_name = data.declare_name;
          this.CourseForm.describe = data.describe;
          // 主要成员和主要负责人
          const principal = [];
          const members = [];
          if (data.teamers != null && data.teamers.length != 0) {
            data.teamers.forEach((item, index) => {
              if (item.type_id === "1") {
                principal.push(item);
              } else if (item.type_id === "2") {
                members.push(item);
              }
            });
            this.principalForm.principalData.forEach((item, index) => {
              principal.forEach((ele, key) => {
                if (index === key) {
                  this.principalForm.principalData[index] = ele;
                }
              });
            });
            this.membersForm.membersData.forEach((item, index) => {
              members.forEach((ele, key) => {
                if (index === key) {
                  this.membersForm.membersData[index] = ele;
                }
              });
            });
          }
          // 自定义字段
          this.customfields.map((item) => {
            data.meta.map((ele) => {
              if (item.field_id === ele.field_id) {
                if (item.field_type == "p_checkbox") {
                  this.CourseForm.fields[
                    item.field_code
                  ] = ele.fields_value.split(",");
                } else {
                  this.CourseForm.fields[item.field_code] = ele.fields_value;
                }
              }
            });
          });
          this.fileListData = data.attach;
          // 文件列表
          if (this.fileListData != undefined) {
            this.fileListData.forEach((item) => {
              if (item.type === "1") {
                this.uploadedFileList.push(item);
              } else if (item.type === "2") {
                this.uploadedVideoList.push(item);
              } else if (item.type === "3") {
                this.uploadedZipList.push(item);
              } else {
                this.uploadedPicList.push(item);
              }
            });
          }
        } else if (result.code === -1) {
          this.$router.push({
            path: "/rootError",
          });
        }
      });
    },
    // 申报项目自定义字段
    queryUserCustomFields() {
      UserCustomFields({
        token: this.token,
        project_id: this.projectid,
      }).then((result) => {
        const { data } = result;
        this.customfields = data;
        this.customfields.map((item) => {
          if (
            item.field_type === "p_checkbox" ||
            item.field_type === "p_radio" ||
            item.field_type === "p_selected"
          ) {
            this.$set(this.CourseForm.fields, item.field_code, []);
          }
        });
        this.queryUserDeclareDetails();
      });
    },
    //获取附件限制
    queryUserProjectDetails() {
      UserProjectDetails({
        token: this.token,
        project_id: this.projectid,
      }).then((result) => {
        const { data } = result;
        this.ProjectDetails = data;
        for (var i = 0; i < data.teamleader_num; i++) {
          const obj = {};
          obj["real_name"] = "";
          obj["phone"] = "";
          obj["yuanxi"] = "";
          obj["zhiwu"] = "";
          obj["zhicheng"] = "";
          obj["renwu"] = "";
          this.principalForm.principalData.push(obj);
        }
        for (let i = 0; i < data.teammember_num; i++) {
          const obj = {};
          obj["real_name"] = "";
          obj["phone"] = "";
          obj["yuanxi"] = "";
          obj["zhiwu"] = "";
          obj["zhicheng"] = "";
          obj["renwu"] = "";
          this.membersForm.membersData.push(obj);
        }
      });
    },
    // 提交表单
    onSubmit() {
      this.status = "1";
      this.queryUserDeclareEdit();
    },
    onSubmit2() {
      this.status = "2";
      this.queryUserDeclareEdit();
    },
    // 申请申报项目
    queryUserDeclareEdit() {
      var customArr = [];
      var principalArr = [];
      var membersArr = [];
      this.principalForm.principalData.forEach((item) => {
        if (
          item.real_name != "" ||
          item.phone != "" ||
          item.zhiwu != "" ||
          item.zhicheng != "" ||
          item.yuanxi != "" ||
          item.renwu != ""
        ) {
          item["type_id"] = 1;
          principalArr.push(item);
        }
      });
      this.membersForm.membersData.forEach((item) => {
        if (
          item.real_name != "" ||
          item.phone != "" ||
          item.zhiwu != "" ||
          item.zhicheng != "" ||
          item.yuanxi != "" ||
          item.renwu != ""
        ) {
          item["type_id"] = 2;
          membersArr.push(item);
        }
      });
      var teamers = principalArr.concat(membersArr);
      for (var i in this.CourseForm.fields) {
        var obj = {};
        obj["fields_key"] = i;
        this.customfields.map((item) => {
          if (item.field_code === obj["fields_key"]) {
            obj["field_id"] = item.field_id;
          }
        });
        obj["fields_value"] = this.CourseForm.fields[i]
          .toString()
          .replace(/^(\s|,)+|(\s|,)+$/g, "");
        customArr.push(obj);
      }
      customArr = JSON.stringify(customArr);
      teamers = JSON.stringify(teamers);
      UserDeclareEdit({
        token: this.token,
        declare_id: this.declareid,
        status: this.status,
        project_id: this.projectid,
        declare_name: this.CourseForm.declare_name,
        teamers: teamers,
        describe: this.CourseForm.describe,
        attach: JSON.stringify([
          ...this.fileAttachList,
          ...this.uploadedFileList,
          ...this.videoAttachList,
          ...this.uploadedVideoList,
          ...this.zipAttachList,
          ...this.uploadedZipList,
          ...this.picAttachList,
          ...this.uploadedPicList
        ]),
        customfields: customArr,
      }).then((result) => {
        if (result.code === 1) {
          this.$message({
            message: "执行成功",
            type: "success",
          });
          this.$router.push({
            path: "/declare-shenbao",
            query: {
              project_id: this.projectid,
            },
          });
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    backgroundShow() {
      this.$emit("backgroundShow", this.Showbg);
    },
  },
  created() {
    this.backgroundShow();
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    const declareid = this.$route.query.declareid;
    const projectid = this.$route.query.projectid;
    this.token = token;
    this.projectid = projectid;
    this.declareid = declareid;
    this.queryUserCustomFields();
    this.queryUserProjectDetails();
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 100%;
  height: 100%;
}
.main {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  color: #242748;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  margin: 0 50px 20px 30px;
  text-align: left;
  font-family: "PingFang";
  .container {
    width: 100%;
    height: 960px;
    padding-bottom: 30px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    .container-top {
      .top {
        display: flex;
        margin-bottom: 30px;
        .title {
          font-size: 26px;
          font-family: "黑体";
          color: #5673ff;
          margin-right: 60px;
        }
        .column {
          display: flex;
          font-size: 16px;
          .item {
            display: flex;
            align-items: center;
            padding-right: 50px;
            img {
              width: 15px;
              height: 15px;
              margin-right: 12px;
            }
            p {
              cursor: pointer;
            }
          }
          /deep/.el-badge__content.is-fixed.is-dot {
            left: 2px;
            top: 5px;
          }
        }
      }
      .contentTitle {
        p {
          font-size: 22px;
          color: #242748;
          line-height: 32px;
          font-weight: 700;
        }
      }
    }
    .container-top {
      padding: 33px 45px 25px;
      border-bottom: solid 1px #e7e9eb;
    }
    .content {
      padding: 40px;
      height: 820px;
      overflow-y: auto;
      & > form {
        /deep/.el-form-item,
        & > p {
          margin-bottom: 38px;
          font-weight: 700;
          .join {
            font-size: 18px;
            color: #2197fd;
            margin-left: 30px;
            i {
              margin-right: 10px;
            }
          }
        }
        // 单选按钮样式
        /deep/.el-radio {
          margin-right: 50px;
        }
        /deep/.el-radio__inner {
          width: 20px;
          height: 20px;
        }
        /deep/.el-radio__input.is-checked .el-radio__inner {
          border-color: #6b84fb;
          background: none;
        }
        /deep/.el-radio__inner::after {
          width: 14px;
          height: 14px;
          background-color: #6b84fb;
        }
        /deep/.el-radio__label {
          font-size: 18px;
          color: #828b98;
        }
        // 多选按钮样式
        /deep/.el-checkbox {
          margin-right: 60px;
        }
        /deep/.el-checkbox__inner {
          width: 20px;
          height: 20px;
        }
        /deep/.el-checkbox__inner::after {
          width: 5px;
          height: 10px;
          left: 6px;
          border-color: #5a73ff;
        }
        /deep/.el-checkbox__label {
          color: #9d9fa2;
          font-size: 18px;
        }
        /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
          color: #9d9fa2;
        }
        /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
        /deep/.el-checkbox__input.is-indeterminate /deep/.el-checkbox__inner {
          background-color: transparent;
          border-color: #5a73ff;
        }
        /deep/.el-input__prefix {
          left: 85%;
          width: 23px;
          height: 23px;
        }
        /deep/.el-input__icon {
          font-size: 20px;
          color: #271d1a;
        }
        /deep/.el-input__inner {
          font-size: 18px;
          color: #9d9fa2;
          font-family: "PingFang";
        }
        /deep/.el-textarea__inner,
        .commitment {
          width: 80%;
        }
        /deep/.el-textarea__inner {
          height: 270px;
          resize: none;
          &::placeholder {
            font-size: 18px;
            font-family: "PingFang";
          }
        }
        /deep/.el-form-item__label {
          text-align: left;
          color: #242748;
          font-size: 18px;
          font-weight: 700;
          width: 20% !important;
        }
        /deep/.button .el-form-item__content {
          margin-left: 0 !important;
        }
        /deep/.el-upload {
          float: left;
        }
        /deep/.el-upload__tip {
          font-size: 18px !important;
          color: #242748 !important;
        }
        /deep/ul.el-upload-list.el-upload-list--picture {
          width: 35%;
        }
        /deep/.el-upload-list--picture .el-upload-list__item {
          height: 70px;
          line-height: 70px;
          background-color: #f4f7fc;
          border: none;
        }
        /deep/.el-upload-list--picture .el-upload-list__item-thumbnail {
          width: 50px;
          height: 50px;
          margin-left: -70px;
        }
        /deep/.el-upload-list--picture
          .el-upload-list__item.is-success
          .el-upload-list__item-name {
          line-height: 48px;
          color: #242748;
          font-size: 14px;
          font-weight: 700;
        }
      }
      .item {
        display: flex;
        margin-bottom: 60px;
        p {
          font-weight: 700;
          &:first-of-type {
            width: 200px;
          }
        }
      }
      .common {
        width: calc(100% - 40%);
        /deep/.el-input__prefix {
          left: 95%;
        }
        /deep/.el-input__inner {
          padding-left: 25px;
        }
      }
      .main-members {
        .name {
          font-size: 16px;
        }
        .el-input {
          width: 11%;
          margin-right: 25px;
          /deep/.el-input__inner {
            padding-left: 25px;
          }
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
      .commitment {
        border: solid 1px #e7e9eb;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 18px;
        color: #242748;
        & > p {
          margin-bottom: 50px;
          font-weight: 700;
        }
        & > div {
          display: flex;
          font-weight: 700;
          /deep/.el-input__inner {
            padding: 0 20px;
          }
        }
        /deep/.el-form-item__label {
          width: 70px !important;
        }
        /deep/.el-form-item__content {
          margin-left: 70px !important;
        }
        .signature {
          display: flex;
          margin-right: 120px;
          p {
            font-weight: 700;
          }
          button {
            margin-right: 20px;
          }
        }
        .esigns {
          width: 240px;
          height: 135px;
          background-color: #f1f3fd;
          & > canvas {
            width: 100% !important;
            height: 98% !important;
          }
        }
      }
      .file {
        display: flex;
        font-size: 18px;
        margin-bottom: 20px;
        & > p {
          margin-right: 40px;
          font-weight: 700;
        }
        /deep/.upload-demo {
          height: 50px;
        }
        /deep/.el-upload__tip {
          float: left;
          margin-top: 0;
          font-weight: 700;
        }
      }
      .uploadBtn {
        padding: 7px 12px 7px 10px;
        margin-right: 10px;
        background-color: #e5eefe;
        border: solid 1px #c8e3fe;
        color: #2197fd;
        font-size: 14px;
        letter-spacing: 1px;
      }
      /deep/.el-icon-circle-plus {
        color: #2197fd;
        font-size: 16px;
      }
      .preview {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 0 22px;
        background-color: #f4f7fc;
        border-radius: 5px;
        .details {
          width: 90%;
          margin: 0 0 0 20px;
          .title {
            width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #242748;
            font-size: 14px;
            font-weight: 700;
          }
          p {
            line-height: 20px;
            font-size: 12px;
            color: #a1a4b5;
            span {
              margin-right: 10px;
            }
          }
        }
        .preview-btn {
          height: 18px;
          display: flex;
          & > div {
            width: 18px;
            height: 18px;
            margin-left: 18px;
            img {
              display: block;
            }
          }
        }
      }
    }
  }
  .close {
    border: solid 1px #e7e9eb;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.14);
    color: #242748;
  }
  .save {
    background-color: #5673ff;
    border: solid 1px #2d4eff;
    margin: 0 30px;
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
  }
  .submit {
    border: solid 1px rgb(77, 141, 247);
    background-color: rgb(105, 161, 255);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
    img {
      width: 18px;
      height: 16px;
    }
  }
  .save,
  .close,
  .submit {
    padding: 8px 15px 8px 20px;
    font-size: 14px;
    font-family: "PingFang";
    letter-spacing: 1px;
    /deep/i,
    img {
      margin-right: 8px;
      font-size: 18px;
      vertical-align: middle;
    }
  }
  /deep/.table {
    border-radius: 20px;
    .el-dialog__title {
      font-family: "黑体";
      font-size: 28px;
      color: #5673ff;
    }
    .el-dialog__header {
      padding: 30px 0 20px;
    }
    .el-dialog__body {
      padding-top: 0;
      padding-bottom: 10px;
      font-size: 24px;
    }
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__error {
        font-size: 12px;
        top: 72%;
      }
    }
    .el-form-item__content {
      text-align: center;
      height: 55px;
    }
    .el-button {
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
    .el-table {
      margin-bottom: 30px;
    }
  }
}
</style>
